<template>
    <view class="page">
        <view class="main" v-for="item in 20">
            <view class="pic_box"></view>
            <view class="txt_box">
                <view class="name_box">产品产品产品产品产品产品产品产</view>
                <view class="remark_box">消耗熔炼物品</view>
                <view class="num_box">
                    <view class="left_box">产品产品产品产品产品产品产品产...</view>
                    <view class="rt_box">×2</view>
                </view>
                <view class="time_box">熔炼时间：2023-8-22 15:32:45</view>
            </view>
        </view>
        <view class="bot_box">暂无更多记录~</view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            recordList: [],//列表
            page: 1,//分页
            flag: true,// 防抖开关 防止用户不停的下拉
        }
    },
    onReachBottom() {
        if (this.flag) {
            this.getInfo()
        } else {
            uni.showToast({
                title: "已经到底了",
                icon: 'none'
            })
        }
    },
    onShow() { },
    methods: {
        getInfo() {
            let data = {
                date: this.date,
                status: this.status,
                page: this.page
            }
            uni.showLoading({
                title: '加载中~',
            })
            this.$Request.get(this.$api.user.cashList, data).then(res => {
                uni.hideLoading()
                var recordList = res.data.list
                this.page++
                this.recordList = this.recordList.concat(recordList);// 拼接回来的数据
                // 当回来的数据小于十条得时候 不让再请求了 否则继续请求
                if (recordList.length < 10) {
                    this.flag = false
                } else {
                    this.flag = true
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: #262626;
    padding-top: 40rpx;

    .main {
        width: 710rpx;
        height: 226rpx;
        background: rgba(255, 239, 206, 0.2);
        border: 1px solid #FCE1A8;
        border-radius: 20rpx;
        margin: auto;
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 43rpx;

        .pic_box {
            width: 186rpx;
            height: 186rpx;
            border: 1px solid #FCE1A8;
            border-radius: 10rpx;
        }

        .txt_box {
            width: 437rpx;
            height: 186rpx;

            .name_box {
                width: 100%;
                height: 30rpx;
                font-size: 28rpx;
                font-family: PangMenZhengDao-3;
                font-weight: 400;
                color: #E7A134;
                line-height: 30rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 35rpx;
            }

            .remark_box {
                width: 100%;
                height: 28rpx;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 23rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 15rpx;
            }

            .num_box {
                width: 100%;
                height: 28rpx;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #B8B8B8;
                line-height: 28rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 29rpx;

                .left_box {
                    width: 80%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .rt_box {

                    width: 20%;
                }
            }

            .time_box {
                width: 100%;
                height: 30rpx;
                font-size: 22rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 30rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    .bot_box {
        width: 100%;
        height: 42rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 42rpx;
        text-align: center;
    }
}
</style>